<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">

    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>

</head>
<body>

<div class="layui-container">
<div class="layui-row">
    <div class="layui-col-md3">
        <!--            第一层循环-->
        {volist name="data" id="item"}
        <ul class="layui-menu" id="">
            <li class="layui-menu-item-divider"></li>
            <li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}">
                <div class="layui-menu-body-title">
                    {$item.dept_name} <i class="layui-icon layui-icon-up"></i>
                </div>
                <ul>
                    <!--                        第二层循环-->
                    {foreach $item.children as $key=>$vo }
                    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: false}">
                        <div class="layui-menu-body-title">{$vo.dept_name}</div>
                        <ul>
                            <!--                                第三层循环-->
                            {foreach $vo.children as $k=>$v }
                            <li class="layui-menu-item-checked">
                                <div class="layui-menu-body-title">{$v.dept_name}</div>
                            </li>
                            {/foreach}
                        </ul>
                    </li>
                    {/foreach}
                </ul>
            </li>
            <li class="layui-menu-item-divider"></li>
        </ul>
        {/volist}
    </div>
    <div class="layui-col-md9" >

        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名称搜索</label>
                <div class="layui-input-block">
                    <input type="text" name="title" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <a href="export" class="layui-btn layui-btn-normal" id="export">导出</a>


        </form>
        <form action="import" method="post" enctype="multipart/form-data">
            <input type="file"  class="layui-btn" name="import" id="import">
            <input type="submit" value="导入" >
        </form>

        <script>
            //Demo
            layui.use('form', function(){
                var form = layui.form;

                //监听提交
                form.on('submit(formDemo)', function(data){
                    layer.msg(JSON.stringify(data.field));
                    return false;
                });
            });
        </script>
        <table class="layui-hide" id="demo"></table>
        <script>
            layui.use('table', function(){
                var table = layui.table;
                var data;
                $.ajax({
                    url:'http://pyg.com/week/getUserList',
                    dataType:'json',
                    success:function (res) {
                        data = res.data;
                        //展示已知数据
                        table.render({
                            elem: '#demo'
                            ,cols: [[ //标题栏
                                {field: 'id', title: 'ID', width: 80, sort: true}
                                ,{field: 'user_name', title: '用户名', width: 120}
                                ,{field: 'phonenumber', title: '电话', minWidth: 150}
                                ,{field: 'sign', title: '签名', minWidth: 160}
                                ,{field: 'sex', title: '性别', width: 80}
                                ,{field: 'city', title: '城市', width: 100}
                                ,{field: 'experience', title: '积分', width: 80, sort: true}
                            ]]
                            ,data:res.data
                            //,skin: 'line' //表格风格
                            ,even: true
                            //,page: true //是否显示分页
                            //,limits: [5, 7, 10]
                            //,limit: 5 //每页默认显示的数量
                        });
                    }
                })


            });

            // $('#export').click(function () {
            //     $.ajax({
            //         url:'http://pyg.com/week/export',
            //         dataType:'json',
            //         success:function (res) {
            //
            //         }
            //     })
            // })
        </script>
    </div>
</div>
</div>


<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
    layui.use(['dropdown', 'util'], function(){
        var dropdown = layui.dropdown
            ,util = layui.util
            ,$ = layui.jquery;

        //菜单点击事件
        dropdown.on('click(demo1)', function(options){
            var thisElem = $(this);
            console.log(thisElem, options);
        });


        util.event('lay-active', {
            normal: function(){
                $('#demo-box').children().addClass('layui-col-md3').removeClass('layui-col-md4');
                $('#demo-box').find('.layui-menu').removeClass('layui-menu-lg');
            }
            ,lg: function(){
                $('#demo-box').children().addClass('layui-col-md4').removeClass('layui-col-md3')
                $('#demo-box').find('.layui-menu').addClass('layui-menu-lg');
            }
        });
    });
</script>

</body>
</html>